<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="js/utils.js"></script>
  </head>
  <body>
    <form method="post" enctype="multipart/form-data" action="/upload/file" id="demoForm">
      <div>
        <input type="file" id="imageFile" name="imageFile">
      </div>
      <button type="submit">上传</button>
    </form>
    <img id="image">
  </body>
  <script>
    $("#demoForm").submit(function(){
      //获取用户选择的所有文件（可能有多个，所以本质上是一个数组）
      let files = document.getElementById("imageFile").files;
      //判断是不是真的选中文件
      if(files.length > 0){
        let file = files[0];
        //上传文件
        uploadImage(file)
      }else {
        alert("请选择图片后再提交")
      }
      return false; //阻止表单提交
    });

    function uploadImage(file){
      //使用ajax上传文件的固定写法是实例化一个form对象，并向其赋文件参数
      let form = new FormData();
      form.append("imageFile",file);
      $.ajax({
        url: "/upload/image",
        method: 'post',
        data: form,
        //使用ajax执行文件上传必须设置contentType processData为false，否则会按照字符串数据处理上传；
        contentType: false,
        processData: false,
        success:function(r){
          console.log(r);
          if(r.code == OK){
              //alert('上传完成')
              $("#image").attr("src",r.message);
          }else {
            alert('上传失败')
          }
        }
      })
    }

  </script>
</html>